import React,{useState,useEffect} from 'react'
import {useDebounce,cleanObject} from '../../utils/index'
import {List} from './list'
import {SearchPanel} from './searchPanel'
import * as qs from "qs"

const apiUrl = process.env.REACT_APP_API_URL
export default function Screen() {
    const [param,setParam] = useState({
        name:'',
        personId:''
      })
    const [users,setUsers] = useState([])
    const [list,setList] = useState([])
    const deBounceParams = useDebounce(param,200)
    useEffect(()=>{
        fetch(`${apiUrl}/projects?${qs.stringify(cleanObject(deBounceParams))}`)
        .then(async response => {
          if(response.ok){
            setList(await response.json())
          }
        })
      },[deBounceParams])
    useEffect(()=>{
        fetch(`${apiUrl}/users`).then(async response=>{
            if(response.ok){
            setUsers(await response.json())
            }
        })
    },[])
  return (
    <div>
        <SearchPanel users={users} param={param} setParam={setParam}/>
        <List users ={users} list={list}/>
    </div>
  )
}

